<template name="ImageBox">
  <div class="image-box cursor" :style="{ ...customStyle }">
    <img class="cursor" :src="itemList.picUrl" ref="imageRef" @click.self="toDetail" />
    <div class="box-list" :style="titleStyle" @mouseenter="() => {
      if (!isFetch) return
      if (!playList.length) getPlaylist(itemList.id)
      flag = true
    }
      " @mouseleave="() => {
        if (!isFetch) return
        flag = false
      }
        ">
      <div class="title" @click.self="toDetail" :style="{ height: flag ? 'auto' : '100%' }">
        {{ itemList.name }}
      </div>
      <div class="list" v-show="flag">
        <div class="over-ellipsis cursor" v-for="(item, index) in playList.splice(0, 3)" :key="item.id" @click="() => {
          console.log(item.id)
        }
          ">
          {{ index + 1 }}&nbsp;&nbsp;{{ item.name }}
        </div>
        <i class="iconfont icon-bofang3 cursor" v-show="flag"></i>
      </div>
    </div>
    <div class="play-count">
      <span>
        <i class="iconfont icon-white-play"></i>
      </span>
      <span>
        {{ Utils.getFormatNumber(itemList.playCount) || 0 }}
      </span>
    </div>
    <div class="description"></div>
  </div>
</template>

<script setup lang="ts">
import colorThief from 'colorThief'
import { computed, onMounted, ref, watch } from 'vue'
import type { customStyleType } from './type'
import Utils from '@/utils/commonUtils'
import usePlaylistApi from './usePlaylistApi'
import { useRouter } from 'vue-router'
const { item, isFetch, customStyle } = withDefaults(
  defineProps<{
    item: any
    customStyle?: customStyleType
    isFetch?: boolean
  }>(),
  {
    isFetch: true,
    customStyle: () => ({
      borderRadius: '.75rem',
      backgroundRepeat: 'no-repeat',
      backgroundSize: `cover`,
      marginRight: '2%',
      flex: '0 0 15%',
      height: 'auto'
    })
  }
)
const { getPlaylist, playList } = usePlaylistApi() // 获取播放列表
const imageRef = ref() // 获取图片的ref
onMounted(() => {
  getImageColor(imageRef.value) // 获取图片的主色
})
// 获取图片的主色
const imageColor = ref('')
const rgbaToHex = (rgba: any) => {
  // rgba转16进制
  let hex = '#'
  for (const i of rgba) {
    hex += i.toString(16).padStart(2, '0')
  }
  return hex
}
const getImageColor = (img: HTMLImageElement) => {
  img.crossOrigin = 'anonymous' // 解决跨域
  const ColorThief = new colorThief()
  // let initColor = ''
  let colors: string[] = []
  img.addEventListener('load', () => {
    colors = ColorThief.getPalette(img)!.map((e) => rgbaToHex(e)) // 调色板
    // initColor = rgbaToHex(ColorThief.getColor(img)) // 图片主色调
  })
  setTimeout(() => {
    imageColor.value = colors[3]
  }, 50)
}
// 鼠标悬浮渐变
const flag = ref(false)
const titleStyle = computed(() => {
  if (!flag.value) {
    return {
      backgroundColor: imageColor.value
    }
  } else {
    return {
      height: '60%',
      transition: '.3s',
      paddingBottom: '10%',
      backgroundColor: 'transparent !important',
      background: `linear-gradient(transparent, ${imageColor.value}`
    }
  }
})
// 声明一个计算属性itemList
const itemList = ref<any>()
watch(
  () => item.value,
  () =>
  (itemList.value = {
    ...item,
    picUrl: item.picUrl || item.coverImgUrl
  }),
  { immediate: true }
)
// 跳转到详情页
const $router = useRouter()
const toDetail = () => {
  $router.push({
    name: 'playlistDetails',
    params: { id: item.id }
  })
}
</script>

<style scoped lang="less">
.image-box {
  position: relative;
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;

  img {
    width: 100%;
    height: 100%;
    border-radius: 0.75rem;
  }

  .box-list {
    position: absolute;
    width: 100%;
    height: 3.75rem;
    bottom: 0;
    padding: 0.375rem 0.625rem;
    box-sizing: border-box;
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;

    .title {
      width: 100%;
      line-height: initial;
      font-size: 1rem;
      display: -webkit-box;
      text-overflow: ellipsis;
      overflow: hidden;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .list {
      margin-top: 5%;
      line-height: 1.625rem;
      font-size: 0.8125rem;
      color: #f7f4f4;
      width: 60%;

      .iconfont {
        position: absolute;
        right: 10%;
        bottom: 10%;
        font-size: 1.875rem;
      }
    }
  }

  .play-count {
    position: absolute;
    top: 2%;
    right: 5%;
  }
}
</style>
